<template>
  <div id="login">
    <div class="loginContent">
      <!-- 头像框 -->
      <div class="logo"><img src="~@/assets/beijing/pika.jpg" alt="" /></div>
      <!-- 登录框内容 -->
      <div class="inputContent">
        <el-form :rules="rules" ref="form" :model="login">
          <el-form-item prop="name">
            <el-input
              prefix-icon="el-icon-user"
              v-model="login.name"
            ></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-switch-button"
              v-model="login.password"
              show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="code">
            <el-input
              prefix-icon="el-icon-sugar"
              v-model="login.code"
            ></el-input
            ><img :src="capcharUrl" /> </el-form-item
        ></el-form>
      </div>
      <!-- 功能按钮 -->
      <div class="btn">
        <el-button type="primary" @click="loginafter">登录</el-button>
        <el-button @click="register">注册</el-button>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      login: { name: "wxy", password: 123456, code: "aaa" },
      capcharUrl: "",
      //   表单验证
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
      },
    };
  },
  methods: {
    //   登录
    loginafter() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          const token = localStorage.getItem("token");
          if (token) {
            this.$store.commit("SET_TOKEN", token);
          } else {
            this.$store.commit("SET_TOKEN", "www");
          }
          this.$router.push("main");
        } else {
          return false;
        }
      });
    },
    // 注册
    register() {
      this.$router.push("/register");
    },
  },
  mounted() {
    if (JSON.stringify(this.$route.query) !== "{}") {
      console.log(this.$route.query.register);
      this.login = this.$route.query.register;
    }
  },
};
</script>

<style lang="less" scoped>
#login {
  width: 100%;
  height: 100%;
  // position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url(~@/assets/beijing/bizhi.jpg);
  .loginContent {
    width: 450px;
    height: 350px;
    //  border: 1px solid #707070;
    background: #fff;
    border-radius: 2%;
    .logo {
      width: 100px;
      height: 100px;
      border: 1px solid #efe;
      border-radius: 50%;
      background-color: #fff;
      box-shadow: 0 0 5px #efe;
      padding: 5px;
      position: relative;
      top: -15%;
      left: 35%;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #fff;
      }
    }
    .inputContent {
      width: 400px;
      height: 250px;
      position: absolute;
      left: 48%;
      top: 48%;
      margin-left: -150px;
      margin-top: -100px;
      .el-form {
        .el-form-item {
          //   margin: 0;
          //   display: flex;
          //   align-items: center;
          //   justify-content: center;
        }
      }
    }
    .btn {
      position: relative;
      top: 125px;
      left: 125px;
    }
  }
}
</style>
